<template>
  <div class="app-container">
    <el-card :style="{ borderRadius: '5px' }">
      <div class="filter-container">
        <el-select v-model="listQuery.countryId" style="width: 160px; margin-right: 10px" placeholder="请选择国家" clearable
          @change="handleCountry">
          <el-option v-for="item in countryList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>

        <el-select v-model="listQuery.cityId" style="width: 160px; margin-right: 10px" placeholder="请选择城市" clearable
          @change="handleCity">
          <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>

        <el-select v-model="listQuery.regionId" style="width: 160px; margin-right: 10px" placeholder="请选择区域" clearable>
          <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>

        <el-select v-model="listQuery.creatorId" style="width: 160px; margin-right: 10px" placeholder="请选择创建人" clearable>
          <el-option v-for="item in userAllOptions" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-date-picker v-model="createTimeDateVul" format="yyyy-MM-dd " value-format="yyyy-MM-dd" type="daterange"
          range-separator="至" start-placeholder="创建时间开始" end-placeholder="创建时间结束" style="width: 400px"
          @change="handlecreateTimeDateChange" />
        <el-select v-model="listQuery.status" style="width: 160px; margin-right: 10px" placeholder="请选择租售状态" clearable>
          <el-option v-for="item in statusOption" :key="item.value" :label="item.name" :value="item.value" />
        </el-select>
        <el-select v-model="listQuery.type" style="width: 160px; margin-right: 10px" placeholder="请选择类型" clearable>
          <el-option v-for="item in typeOption" :key="item.value" :label="item.name" :value="item.value" />
        </el-select>
        <el-select v-model="listQuery.auditStatus" style="width: 160px; margin-right: 10px" placeholder="请选择审核状态"
          clearable>
          <el-option v-for="item in auditStatusOption" :key="item.value" :label="item.name" :value="item.value" />
        </el-select>
        <el-select v-model="listQuery.propertyType" style="width: 160px; margin-right: 10px" placeholder="请选择物业类型"
          clearable>
          <el-option v-for="item in propertyTypeDictOptions" :key="item.keyName" :label="item.keyName"
            :value="item.keyValue" />
        </el-select>
        <el-input v-model="listQuery.id" placeholder="请输入房源ID" style="width: 200px; margin-left: 10px"
          @keyup.enter.native="handleFilter" />

        <el-button v-waves type="primary" style="margin-top: 10px;margin-left:10px" plain icon="el-icon-search"
          @click="handleFilter">搜索</el-button>
        <el-button type="primary" plain style="margin-top: 10px" icon="el-icon-plus" @click="handleAdd">添加</el-button>
      </div>
    </el-card>
    <el-card :style="{ marginTop: '10px', borderRadius: '5px' }">
      <el-table v-loading.body="!listLoading" :header-row-style="{ height: '70px' }" :header-cell-style="{
        color: '',
        fontSize: '',
        backgroundColor: '#dfe6ec',
      }" :data="list" border fit highlight-current-row style="width: 100%" tooltip-effect="dark">
        <el-table-column label="序号" width="50px" align="center" type="index" show-overflow-tooltip />
        <el-table-column label="ID" prop="id" width="60px" align="center" show-overflow-tooltip />
        <el-table-column label="标题" min-width="300px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.title }}</template>
        </el-table-column>

        <el-table-column label="价格" prop="price" align="center" width="120px" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span v-if="row.type == 1">{{ row.rentPrice }}</span>

            <span v-if="row.type == 4">{{ row.familyPrice }}</span>

            <span v-if="row.type == 14">{{ row.rentPrice }}（monthly）/ {{ row.familyPrice }}（daily）</span>
          </template>
        </el-table-column>
        <el-table-column label="实地勘察" prop="verified" align="center" width="80px" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span v-if="row.verified == '1'">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>

        <el-table-column prop="logo" label="主图" min-width="100px" align="center">
          <template slot-scope="{ row }">
            <div style="display: flex; justify-content: center">
              <HzImg :src="row.logo" cssStyle="height: 80px;width: 80px" />
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="photoUrls" label="房源照片" min-width="100px" align="center">
          <template slot-scope="{ row }">
            <div style="display: flex; justify-content: center">
              <HzImg :src="row.photoUrls" cssStyle="height: 80px;width: 80px" />
            </div>
          </template>
        </el-table-column>

        <el-table-column label="创建人" prop="creatorId" align="center" width="100px" :formatter="creatorIdFormatter"
          show-overflow-tooltip />

        <el-table-column label="房源实勘人" prop="photoUploaderId" align="center" width="100px"
          :formatter="photoUploaderIdFormatter" show-overflow-tooltip />

        <el-table-column label="创建时间" prop="createTime" align="center" width="170px" show-overflow-tooltip />

        <!-- <el-table-column label="上传时间" prop="uploadTime" align="center" width="170px" show-overflow-tooltip /> -->

        <el-table-column label="租售状态" min-width="80px" align="center" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span v-if="row.status == 0">待租售</span>
            <span v-if="row.status == 1">已出</span>
          </template>
        </el-table-column>

        <el-table-column label="类型" width="200px" align="center" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span>{{ row.typename }}</span>
          </template>
        </el-table-column>

        <el-table-column label="审核状态" min-width="100px" align="center" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span v-if="row.auditStatus == 0">未审核</span>
            <span v-if="row.auditStatus == 1">审核通过</span>
            <span v-if="row.auditStatus == 2">审核不通过</span>
          </template>
        </el-table-column>

        <el-table-column label="拒绝理由" prop="rejectReason" align="center" width="200px" show-overflow-tooltip />

        <el-table-column label="审核时间" prop="auditTime" align="center" width="170px" show-overflow-tooltip />

        <el-table-column label="描述信息" prop="remark" align="center" width="200px" show-overflow-tooltip />

        <el-table-column label="物业类型" prop="propertyType" align="center" width="100px" :formatter="propertyTypeFormatter"
          show-overflow-tooltip />

        <!-- <el-table-column label="付款单位" prop="payUnitType" align="center" width="100px" :formatter="pay_unit_typeFormatter"
          show-overflow-tooltip /> -->

        <!-- <el-table-column label="付款周期类型" prop="payPeriodType" align="center" width="100px"
          :formatter="pay_period_typeFormatter" show-overflow-tooltip /> -->

        <el-table-column label="总楼层数" prop="totalFloor" align="center" width="90px" show-overflow-tooltip />

        <el-table-column label="所在楼层数" prop="floor" align="center" width="90px" show-overflow-tooltip />

        <el-table-column label="是否有电梯" min-width="80px" align="center" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span v-if="row.hasLift">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>

        <el-table-column label="房间数" prop="roomNum" align="center" width="90px" show-overflow-tooltip />

        <el-table-column label="卫生间数" prop="hallNum" align="center" width="90px" show-overflow-tooltip />

        <el-table-column label="面积" prop="area" align="center" width="90px" show-overflow-tooltip />

        <el-table-column label="地址" prop="address" align="center" width="200px" show-overflow-tooltip />

        <el-table-column fixed="right" label="操作" align="center" width="220px">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" plain @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.auditStatus == 0" size="mini" type="primary" plain
              @click="audit(scope.row)">审核</el-button>
            <el-button v-if="scope.row.auditStatus == 1" size="mini" type="danger" plain
              @click="down(scope.row)">下架</el-button>
            <el-button v-if="scope.row.auditStatus == 2" size="mini" type="success" plain
              @click="up(scope.row)">上架</el-button>

            <!-- <el-button size="mini" type="danger" plain @click="handleDel(scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div v-show="listLoading" class="pagination-container">
        <el-pagination :current-page.sync="listQuery.currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="9"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </el-card>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible1" width="800px">
      <el-form ref="dataForm" :rules="rules" :model="commonInfo" label-width="120px">
        <el-form-item label="标题:" prop="title">
          <el-input type="textarea" autosize v-model="commonInfo.title" style="width: 350px" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="国家:" prop="countryId">
          <el-select v-model="commonInfo.countryId" style="width: 350px" placeholder="请选择国家" clearable>
            <el-option v-for="item in locationItemAllOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="城市:" prop="cityId">
          <el-select v-model="commonInfo.cityId" style="width: 350px" placeholder="请选择城市" clearable>
            <el-option v-for="item in locationItemAllOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="区域:" prop="regionId">
          <el-select v-model="commonInfo.regionId" style="width: 350px" placeholder="请选择区域" clearable>
            <el-option v-for="item in locationItemAllOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="价格:" prop="price">
          <el-input-number v-model="commonInfo.price" style="width: 350px" placeholder="请输入价格" />
        </el-form-item>
        <el-form-item label="主图:" prop="logo">
          <HzImgUpload :urls.sync="commonInfo.logo" :btn-name="'请上传主图'" :fileType.sync="logo" />
        </el-form-item>
        <el-form-item label="房源照片:" prop="photoUrls">
          <HzImgUpload :urls.sync="commonInfo.photoUrls" :btn-name="'请上传房源照片'" :fileType.sync="photoUrls" />
        </el-form-item>
        <el-form-item label="创建人:" prop="creatorId">
          <el-select v-model="commonInfo.creatorId" style="width: 350px" placeholder="请选择创建人" clearable>
            <el-option v-for="item in userAllOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="房源实勘人:" prop="photoUploaderId">
          <el-select v-model="commonInfo.photoUploaderId" style="width: 350px" placeholder="请选择房源实勘人" clearable>
            <el-option v-for="item in userAllOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="租售状态:" prop="status">
          <el-select v-model="commonInfo.status" style="width: 350px" placeholder="请选择租售状态" clearable>
            <el-option v-for="item in statusOption" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="类型:" prop="type">
          <el-select v-model="commonInfo.type" style="width: 350px" placeholder="请选择类型" clearable>
            <el-option v-for="item in typeOption" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="类型:" prop="type">
          <el-checkbox-group v-model="typeCheckbox" @change="handleCheckedChange">
            <el-checkbox v-for="(item, index) in typeList" :label="item.id" :key="index">{{ item.text }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="verified:" prop="verified">
          <el-checkbox-group v-model="verified">
            <el-checkbox label="1">verified</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="审核状态:" prop="auditStatus">
          <el-select v-model="commonInfo.auditStatus" style="width: 350px" placeholder="请选择审核状态" clearable>
            <el-option v-for="item in auditStatusOption" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="拒绝理由:" prop="rejectReason">
          <el-input type="textarea" autosize v-model="commonInfo.rejectReason" style="width: 350px"
            placeholder="请输入拒绝理由" />
        </el-form-item>
        <el-form-item label="描述信息:" prop="remark">
          <el-input type="textarea" autosize v-model="commonInfo.remark" style="width: 350px" placeholder="请输入描述信息" />
        </el-form-item>
        <el-form-item label="物业类型:" prop="propertyType">
          <el-select v-model="commonInfo.propertyType" style="width: 350px" placeholder="请选择物业类型" clearable>
            <el-option v-for="item in propertyTypeDictOptions" :key="item.keyName" :label="item.keyName"
              :value="item.keyValue * 1" />
          </el-select>
        </el-form-item>
        <el-form-item label="总楼层数:" prop="totalFloor">
          <el-input-number v-model="commonInfo.totalFloor" style="width: 350px" placeholder="请输入总楼层数" />
        </el-form-item>
        <el-form-item label="所在楼层数:" prop="floor">
          <el-input-number v-model="commonInfo.floor" style="width: 350px" placeholder="请输入所在楼层数" />
        </el-form-item>
        <el-form-item label="是否有电梯:" prop="hasLift">
          <el-select v-model="commonInfo.hasLift" style="width: 350px" placeholder="请选择是否有电梯" clearable>
            <el-option v-for="item in booleanOptions" :key="item.name" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="房间数:" prop="roomNum">
          <el-input-number v-model="commonInfo.roomNum" style="width: 350px" placeholder="请输入房间数" />
        </el-form-item>
        <el-form-item label="卫生间数:" prop="hallNum">
          <el-input-number v-model="commonInfo.hallNum" style="width: 350px" placeholder="请输入卫生间数" />
        </el-form-item>
        <el-form-item label="面积:" prop="area">
          <el-input-number v-model="commonInfo.area" style="width: 350px" placeholder="请输入面积" />
        </el-form-item>
        <el-form-item label="地址:" prop="address">
          <el-input type="textarea" autosize v-model="commonInfo.address" style="width: 350px" placeholder="请输入地址" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="cancelData('form')">取 消</el-button>
        <el-button v-if="dialogStatus === 'create'" type="primary" plain @click.native.prevent="createData('form')">确
          定</el-button>
        <el-button v-else type="primary" plain @click.native.prevent="updateData('form')">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="审核" :visible.sync="showAudit" width="35%">
      <el-form ref="dataForm" :model="commonInfo" label-width="120px">
        <el-form-item label="审核意见:" prop="rejectReason">
          <el-radio v-model="commonInfo.auditStatus" label="1">同意</el-radio>
          <el-radio v-model="commonInfo.auditStatus" label="2">拒绝</el-radio>
        </el-form-item>
        <el-form-item v-if="commonInfo.auditStatus == 2" label="拒绝理由:" prop="rejectReason">
          <el-input type="textarea" autosize v-model="commonInfo.rejectReason" style="width: 350px"
            placeholder="请输入拒绝理由" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="cancelAudit('form')">取 消</el-button>
        <el-button type="primary" plain @click.native.prevent="doAudit('form')">确 定</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import HzFileUpload from "@/custom/HzFileUpload";
import HzImgUpload from "@/custom/HzImgUpload";
import HzImg from "@/custom/HzImg";
import HzLink from "@/custom/HzLink";
import waves from "@/directive/waves"; // waves directive
import {
  fetchList,
  saveObj,
  updateObj,
  delObj,
  getObj,
} from "@/api/system/house";

import { fetchAllList as fetchAllLocationItemList } from "@/api/system/locationItem";
import { fetchAllList as fetchAllUserList } from "@/api/system/user";

import { fetchAllList as fetchAllDictList } from "@/api/system/dict";

import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
export default {
  name: "Common",
  directives: {
    waves,
  },
  components: {
    HzFileUpload,
    HzImgUpload,
    HzImg,
    HzLink,
  },
  data() {
    return {
      dateFil: [],
      selectGroup: null,
      showExportPanel: false,
      exportType: "",
      commonInfo: {},
      options: [],
      typeCheckbox: ['1'],
      loading: false,
      dialogFormVisible1: false,
      dialogStatus: "",
      showAudit: false,
      textMap: {
        update: "编辑",
        create: "创建",
      },
      name: "",
      list: [],
      total: 0,
      importPanel: false,
      importLoading: null,
      listLoading: false,
      exportTitle: "",
      extra: {}, //额外参数(用于格式化)
      booleanOptions: [
        { name: "是", value: true },
        { name: "否", value: false },
      ],
      verified:['0'],
      typeList: [{
        id: '1',
        text: "长租"
      }, {
        id: '2',
        text: "二手房出售"
      }, {
        id: '3',
        text: "新房出售"
      }, {
        id: '4',
        text: "民宿"
      }],

      createTimeDateVul: [],
      createTimeStart: null,
      createTimeEnd: null,

      statusOption: [
        { name: "待租售", value: 0 },
        { name: "已出", value: 1 },
      ],
      typeOption: [
        { name: "长租", value: 1 },
        { name: "民宿", value: 4 },
      ],
      auditStatusOption: [
        { name: "未审核", value: 0 },
        { name: "审核通过", value: 1 },
        { name: "审核不通过", value: 2 },
      ],

      propertyTypeDictOptions: [],
      pay_period_typeDictOptions: [],
      pay_unit_typeDictOptions: [],
      userAllOptions: [],
      groups: [],
      listQuery: {
        needExtra: true,
        currentPage: 1,
        pageSize: 10,
      },
      countryList: [],
      cityList: [],
      regionList: [],
      rules: {},
    };
  },
  created() {
    this.getList();
    this.initDictOptionFunction();

    this.createLocationItemIdInit();
    this.createUserIdInit();
  },
  activated() { },

  mounted() { },
  methods: {
    cancelAudit() {
      this.commonInfo = {};
      this.showAudit = false;
    },
    doAudit() {

      updateObj(this.commonInfo).then(() => {
        this.getList();
        this.showAudit = false;
        this.$notify({
          title: "成功",
          message: "操作成功",
          type: "success",
          duration: 2000,
        });
      });
    },
    handleCountry(e) {
      fetchAllLocationItemList({ type: "city", countryId: e }).then((response) => {
        this.cityList = response.data;
      });
    },
    handleCity(e) {
      fetchAllLocationItemList({ type: "region", cityId: e }).then((response) => {
        this.regionList = response.data;
      });
    },
    audit(row) {
      this.commonInfo = { ...row };
      console.log('commonInfo',this.commonInfo)
      this.showAudit = true;
    },
    up(row) {
      this.commonInfo = { ...row };
      this.commonInfo.auditStatus = 1;
      updateObj(this.commonInfo).then(() => {
        this.getList();
        this.$notify({
          title: "成功",
          message: "操作成功",
          type: "success",
          duration: 2000,
        });
      });
    },
    down(row) {
      this.commonInfo = { ...row };
      this.commonInfo.auditStatus = 2;
      updateObj(this.commonInfo).then(() => {
        this.getList();
        this.$notify({
          title: "成功",
          message: "操作成功",
          type: "success",
          duration: 2000,
        });
      });
    },
    createLocationItemIdInit() {
      let param = {};
      param.needExtra = false;
      fetchAllLocationItemList({ type: "country" }).then((response) => {
        this.countryList = response.data;
      });


    },

    createUserIdInit() {
      let param = {};
      param.needExtra = false;
      fetchAllUserList(param).then((response) => {
        this.userAllOptions = response.data;
      });
    },

    initDictOptionFunction() {
      let param = {};
      param.needExtra = false;
      fetchAllDictList(param).then((response) => {
        let dictList = response.data;
        this.propertyTypeDictOptions = dictList.filter(
          (dict) => dict.type == "propertyType"
        );
        this.pay_period_typeDictOptions = dictList.filter(
          (dict) => dict.type == "pay_period_type"
        );
        this.pay_unit_typeDictOptions = dictList.filter(
          (dict) => dict.type == "pay_unit_type"
        );
      });
    },
    propertyTypeFormatter(row, column, cellValue, index) {
      if (cellValue) {
        let os = this.propertyTypeDictOptions;
        for (var i = 0; i < os.length; i++) {
          let o = os[i];
          if (cellValue + "" == o.keyValue) {
            return o.keyLabel;
          }
        }
      }
      return "";
    },
    pay_period_typeFormatter(row, column, cellValue, index) {
      if (cellValue) {
        let os = this.pay_period_typeDictOptions;
        for (var i = 0; i < os.length; i++) {
          let o = os[i];
          if (cellValue + "" == o.keyValue) {
            return o.keyLabel;
          }
        }
      }
      return "";
    },
    pay_unit_typeFormatter(row, column, cellValue, index) {
      if (cellValue) {
        let os = this.pay_unit_typeDictOptions;
        for (var i = 0; i < os.length; i++) {
          let o = os[i];
          if (cellValue + "" == o.keyValue) {
            return o.keyLabel;
          }
        }
      }
      return "";
    },
    handlecreateTimeDateChange(v) {
      this.createTimeDateVul = v;
      if (this.createTimeDateVul != null) {
        this.listQuery.createTimeStart = this.createTimeDateVul[0];
        this.listQuery.createTimeEnd = this.createTimeDateVul[1];
      } else {
        this.listQuery.createTimeStart = "";
        this.listQuery.createTimeEnd = "";
      }
      this.listQuery.page = 1;
      this.getList();
    },

    creatorIdFormatter(row, column) {
      let id = row.creatorId;
      if (this.extra) {
        let map = this.extra["creatorIdExtra"];
        let obj = map[id];
        if (obj) {
          return obj["name"];
        }
      }
      return "";
    },
    photoUploaderIdFormatter(row, column) {
      let id = row.photoUploaderId;
      if (this.extra) {
        let map = this.extra["photoUploaderIdExtra"];
        let obj = map[id];
        if (obj) {
          return obj["name"];
        }
      }
      return "";
    },

    handleAdd() {
      this.commonInfo = {};
      this.dialogFormVisible1 = true;
      this.dialogStatus = "create";
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.currentPage = val;
      this.getList();
    },
    createData() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          saveObj(this.commonInfo).then(() => {
            this.getList();
            this.dialogFormVisible1 = false;
            this.cancelData();
            this.$refs.cascader.handleClear({});
            this.$notify({
              title: "成功",
              message: "添加成功",
              type: "success",
              duration: 2000,
            });
          });
        }
      });
    },
    handleUpdate(row) {
      this.verified =  row.verified.toString().split('');
      this.commonInfo = { ...row };
      console.log('commonInfo//////////',this.commonInfo)
      this.typeCheckbox = row.type.toString().split('');
      this.dialogStatus = "update";
      this.dialogFormVisible1 = true;
    },
    handleCheckedChange(e) {
      this.typeCheckbox = e.sort();
      this.commonInfo.type = this.typeCheckbox.join('');
    },
    updateData() {
      this.commonInfo.verified = this.verified.join('')||'0';
      delete this.commonInfo.createTime;
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          updateObj(this.commonInfo).then(() => {
            this.getList();
            this.dialogFormVisible1 = false;
            this.cancelData();
            this.$refs.cascader.handleClear({});
            this.$notify({
              title: "成功",
              message: "修改成功",
              type: "success",
              duration: 2000,
            });
          });
        }
      });
    },
    cancelData() {
      this.commonInfo = {};
      this.dialogFormVisible1 = false;
      this.$refs["dataForm"].resetFields();
    },
    handleDel(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delObj({ ids: row.id }).then((res) => {
          if (res.statusCode === 8201) {
            this.handleFilter();
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              duration: 2000,
            });
          } else {
            this.$notify({
              title: "失败",
              message: "删除失败",
              type: "success",
              duration: 2000,
            });
          }
        });
      });
    },
    getList() {
      this.listLoading = false;
      fetchList(this.listQuery).then((response) => {
        let data = response.data.records;
        this.list = data;
        console.log('list', this.list)
        this.extra = response.extra;

        this.total = response.data.total;
        this.listLoading = true;
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
  },
};
</script>
<style></style>
